<template>
  <div class="my-con">
    <div class="detail-con">
      <div class="detail-top">
        <div class="top">
          <span>项目总计</span>
          <span>(元)</span>
        </div>
        <div class="top-two">
          <span>{{ number }}</span>
        </div>
      </div>
      <div class="detail-bot">
        <div class="bot">
          <div class="bot-left">
            <span>项目投入</span>
            <span>1444.87</span>
          </div>
          <div class="bot-line"></div>
          <div class="bot-right">
            <span>项目回款</span>
            <span>100000</span>
          </div>
        </div>
      </div>
    </div>
    <div class="detail-content">
      <div class="title">
        <div class="title-top">
          <div>市政信息升级管理平台</div>
          <div>进行中</div>
        </div>
        <div class="title-bot">
          <div>产品集项目</div>
        </div>
      </div>
      <div class="detail-basic">
        <div class="basic-title">
          <div></div>
          <div>基本信息</div>
        </div>
        <div class="basic-content">
          <detail-basic :basic-list="basicList" />
        </div>
      </div>
      <div class="detail-count">
        <div class="count-title">
          <div></div>
          <div>工时统计</div>
        </div>
        <div class="count-content">
          <div class="count-time">
            <div class="count-image">
              <image src="../../../static/project/line.png" />
            </div>
            <div class="time-content">
              <div class="plan-start">
                <div class="plan-time">
                  <div>计划开始时间：</div>
                  <div>2022.02.13</div>
                </div>
              </div>
              <div class="plan-end">
                <div>计划完成时间：</div>
                <div>2023.02.13</div>
              </div>
            </div>
          </div>
          <div class="count-time">
            <div class="count-image">
              <image src="../../../static/project/line.png" />
            </div>
            <div class="time-content">
              <div class="reality-start">
                <div>实际开始时间：</div>
                <div>2022.02.13</div>
              </div>
              <div class="reality-end">
                <div>实际完成时间：</div>
                <div>2023.02.13</div>
              </div>
            </div>
          </div>
          <div class="count-schedule">
            <div class="schedule-title">
              进度
            </div>
            <div class="van-percent">
              <van-progress :percentage="100" show-pivot="false" stroke-width="8px" color="linear-gradient(to right, #739ECA , #ABCDE7)" />
              <span>100%</span>
            </div>
          </div>
        </div>
      </div>
      <div class="expect">
        <div>预计工时</div>
        <div>2273h</div>
      </div>
      <div class="expect">
        <div>可用工日</div>
        <div>134d</div>
      </div>
      <div class="expect">
        <div>工时消耗</div>
        <div>1201h</div>
      </div>
      <div class="expect">
        <div>可用工时</div>
        <div>1072h</div>
      </div>
    </div>
  </div>
</template>
<script>
import detailBasic from './detail-basic.vue'
export default {
  components: { detailBasic },
  data() {
    return {
      number: undefined,
      basicList: [
        {
          name: '项目需求',
          number: '3',
        },
        {
          name: '项目任务',
          number: '625',
        },
        {
          name: '项目bug',
          number: '736',
        },
        {
          name: '项目预算',
          number: '183',
        },
      ],
    }
  },
  mounted() {
    this.handle('2000000')
  },
  methods: {
    handle(str) {
      // 字符串切割为数组反转再转字符串
      const strs = str.toString()
      const reverse_str = strs.split('').reverse().join('')
      const arr = []
      // 循环下标
      for (const i in reverse_str) {
        // 与3取模
        if (i % 3 == 0) {
          // 开始进行分割字符串并反转，推入数组
          arr.push(reverse_str.substr(i, 3).split('').reverse().join(''))
        }
      }
      const strse = arr.reverse().join(',')
      this.number = strse
    },
  },
}
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>
